<template>
    <!-- 横屏状态显示内容 -->
    <view v-if="isLandscape">
        <slot></slot>
    </view>

    <!-- 竖屏提示（支持插槽自定义） -->
    <view v-else class="orientation-tip">
        <slot name="portraitTip">
            请横屏开始游戏
        </slot>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isLandscape: false
        }
    },
    // 当页面加载完成触发
    mounted() {
        this.checkOrientation();
        if (typeof window!== 'undefined') {
            window.addEventListener('orientationchange', this.checkOrientation);
            // 全屏运行
            const appContainer = document.documentElement; // 或指定某个 DOM 元素
            this.enterFullscreen(appContainer);
        }
    },
    // 当页面摧毁前触发
    beforeDestroy() {
        if (typeof window!== 'undefined') {
            window.removeEventListener('orientationchange', this.checkOrientation);
        }
    },
    methods: {
        checkOrientation() {
            if (typeof window!== 'undefined') {
                // 使用 screen.orientation 检测设备方向
                this.isLandscape = screen.orientation.type.includes('landscape');
            }
        },
        // 屏蔽地址栏实现全屏效果
        enterFullscreen(element) {
            if (element && element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element && element.mozRequestFullScreen) { // Firefox
                element.mozRequestFullScreen();
            } else if (element && element.webkitRequestFullscreen) { // Chrome, Safari 和 Opera
                element.webkitRequestFullscreen();
            } else if (element && element.msRequestFullscreen) { // IE/Edge
                element.msRequestFullscreen();
            }
        }
    }
}
</script>

<style>
.orientation-tip {
    width: 100%;
    height: 100vh;
    background-color: black;
    color: #fff;
    text-align: center;
    line-height: 100vh;
    font-size: 25px;
}
</style>    